<template>
  <div id="chart"></div>
</template>

<script setup>
import { nextTick, ref, watch } from 'vue';
import Highcharts from 'highcharts/highstock';
import currentImg from '../../../../assets/images/myapplybatch.png';
const props = defineProps({
  chartsData: {
    type: Array,
    default: () => [1, 2, 3],
  },
  searchvalue: {
    type: String,
    default: '',
  },
  queryInfo: {
    type: Object,
    default: () => ({}),
  },
});
const xCategories = ref([]);
const sameCount = ref([]);
const weici = ref([]);
const init = (data) => {
  Highcharts.chart('chart', {
    title: {
      text: '人数',
      align: 'left',
      style: {
        fontSize: '12px', // 设置标题字体大小
        fontWeight: 'normal', // 设置标题字体为正常（不加粗）
      },
    },
    // 去掉控制台accessibility.js警告
    accessibility: {
      enabled: false,
    },
    xAxis: [
      {
        categories: data.xCategories,
        title: {
          text: '成绩',
          align: 'high', // 将标题对齐到高位（顶部）
          x: 5, // 标题的水平偏移量，负值表示向左偏移
          y: 0, // 标题的垂直偏移量，负值表示向上偏移
        },
        labels: {},
      },
    ],
    yAxis: {
      lineWidth: 1,
      visible: false,
    },
    legend: {
      enabled: false,
    },
    credits: {
      enabled: false,
    },
    plotOptions: {
      area: {
        fillColor: {
          linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1,
          },
          stops: [
            [0, 'rgba(169, 206, 240)'], // 设置填充颜色的起始位置和透明度
            [1, 'rgba(252, 254, 255)'], // 设置填充颜色的结束位置和透明度
          ],
        },
        marker: {
          symbol: 'circle',
          enabled: true,
          radius: 1.5,
          lineWidth: 1,
          lineColor: '#6baae5',
        },
        lineWidth: 1,
        states: {
          hover: {
            lineWidth: 1.5, // 设置悬停状态下线条的宽度
            lineColor: '#6baae5', // 设置悬停状态下线条的颜色
          },
        },
        threshold: null,
      },
    },
    tooltip: {
      pointFormatter: function () {
        const currentData = this.y; // 当前点的数据值
        const currentCategory = this.category; // 当前点的 x 轴的数据
        // const currentWeici = props.queryInfo.section; // 当前点的位次区间
        const currentWeici =
          props.chartsData.filter((item) => item.minScore == currentCategory)[0]
            .highestRank +
          '-' +
          props.chartsData.filter((item) => item.minScore == currentCategory)[0]
            .lowestRank; // 当前点的位次区间
        return `<b>当前位置</b>：${currentCategory}分，${currentData}人</br>位次：${currentWeici}`;
        // 显示格式
      },
    },
    series: [
      {
        type: 'area',
        // name: "当前位置",
        data: data.sameCount,
      },
    ],
    chart: {
      events: {
        load: function () {
          nextTick(() => {
            let xCategories = data.xCategories; // 获取 x 轴数据
            let sameCount = data.sameCount; // 获取对应的人数数据
            // 根据用户输入的分数找到对应的 x 轴位置的索引
            if (!props.searchvalue) {
              return;
            } else {
              let closestIndex = xCategories.reduce((prev, curr, index) => {
                return Math.abs(curr - props.searchvalue) <
                  Math.abs(xCategories[prev] - props.searchvalue)
                  ? index
                  : prev;
              }, 0);
              let xPosition = closestIndex; // 获取最接近的 x 轴的索引  拿准确的数值的话 换算成图片的位置不对
              let yPosition = sameCount[closestIndex]; // 获取对应的人数
              // 将 x 轴数值转换为图表中的坐标位置
              let xChartPosition = this.xAxis[0].toPixels(xPosition);

              let yChartPosition = this.yAxis[0].toPixels(yPosition);

              // 在图表中添加图片
              this.renderer
                .image(
                  currentImg,
                  xChartPosition - 8,
                  yChartPosition - 20,
                  18,
                  25,
                )
                .attr({
                  zIndex: 5, // 设置图片的层级
                })
                .add();
            }
          });
        },
      },
    },
  });
};
watch(
  () => props.chartsData,
  (newValue) => {
    xCategories.value = [];
    sameCount.value = [];
    newValue.forEach((v) => {
      xCategories.value.push(v.minScore);
      sameCount.value.push(v.sameCount);
      weici.value.push(v.highestRank + '-' + v.lowestRank);
    });
    nextTick(() => {
      init({
        xCategories: xCategories.value,
        sameCount: sameCount.value,
        weici: weici.value,
      });
    });
  },
  {
    deep: true,
  },
);
</script>

<style lang="scss" scoped>
#chart {
  margin-top: 20px;
  width: 1200px;
  height: 500px;
}
</style>
<style></style>
